<!--
 * @Author: wcx 1055127249@qq.com
 * @Date: 2024-12-18 11:24:27
 * @LastEditors: wcx 1055127249@qq.com
 * @LastEditTime: 2025-01-16 12:27:43
 * @FilePath: \my-project\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" style="height: 100px">
          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 100px">
          <el-statistic title="男女比">
            <template slot="formatter">
              456/2
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 100px">
          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
            <template slot="prefix">
              <i class="el-icon-s-flag" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-flag" style="color: blue"></i>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" style="height: 100px">
          <el-statistic :value="like ? 521 : 520" title="Feedback">
            <template slot="suffix">
              <span @click="like = !like" class="like">
                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                <i class="el-icon-star-off" v-show="!like"></i>
              </span>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-card shadow="hover">
          <div slot="header">线上热门搜索</div>
          <chartBar style="height: 300px;"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <div slot="header">销售额类别占比</div>
          <chartPei style="height: 300px;"/>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header">近一月访问量</div>
          <chartLine  style="height: 300px;"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import chartBar from '@/components/charts/bar.vue'
import chartPei from '@/components/charts/pei.vue'
import chartLine from '@/components/charts/line.vue'
export default {
  components: {
    chartBar,
    chartPei,
    chartLine
  },
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 1314,
      title: "增长人数",
    };
  },
};
</script>
<style lang="scss">
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>